<template>
    <div class="page_top">
        <div class="left_btn" @click="back">
            <img src="../../../assets/image/back.png" alt="" />
        </div>
        <crumbs basetitle="工具" title="注销员工"></crumbs>
    </div>
    <div class="w-full box-border p-16px">
        <commonTabs v-model:active="active" :tabs="tabs" @change="onTabChange" />
        <div v-if="active === 1">
            <employeeLogout />
        </div>
        <div v-if="active === 2">
            <el-card style="margin-top: 20px">
                <filterComponent v-model:filter-data="filterDataB" @doSearch="searchB" />
            </el-card>
            <el-card style="margin-top: 20px">
                <div class="mb-16px">
                    <el-button type="primary" @click="onBatch">批量操作</el-button>
                </div>
                <tableComponent class="set-height" :table-header="tableHeaderB" :table-data="tableDataB"
                    v-model:page-info="pageInfoB" :selectableArr="selectable" :selectableKey="'id'" selection
                    @pageChange="getuserlistB" @selectionChange="handleSelectionChange">
                    <template #operate>
                        <el-table-column fixed="right" label="操作" width="220">
                            <template #header>
                                <div class="flex gap-8px items-center">
                                    <div>操作</div>
                                    <el-popover effect="dark" placement="top-start" title="提示" :width="200"
                                        trigger="hover"
                                        content="企业超管，不可移出或注销账号，需将超管转移后再次操作。在企业审批流中的人员不可以移出团队，需要将该人员移出审批流后再次操作">
                                        <template #reference>
                                            <el-icon>
                                                <InfoFilled />
                                            </el-icon>
                                        </template>
                                    </el-popover>
                                </div>
                            </template>
                            <template #default="scope">
                                <el-button
                                    v-if="(scope.row.isAdmin === 0 || scope.row.isAdmin === 1) && scope.row.isInApprovalProcess !== 1"
                                    link type="primary" size="small"
                                    @click="onMovingTutOfTheTeam(scope.row)">移出团队</el-button>
                            </template>
                        </el-table-column>
                    </template>
                </tableComponent>
            </el-card>
            <el-dialog v-model="dialogTableVisible" :title="isBatch ? '批量操作' : '确认移除团队吗？'" width="400">
                <div class="w-full box-border flex items-center gap-10px mb-12px" v-if="isBatch">
                    操作类型
                    <el-radio-group v-model="radioType">
                        <el-radio value="0" size="large">移出团队</el-radio>
                        <el-radio value="1" size="large">注销账号</el-radio>
                    </el-radio-group>
                </div>
                <div v-if="radioType === '0'" class="text-14px text-#FF7642">*移出团队后，该人员将不在该公司，一般为已离职人员办理</div>
                <div v-if="radioType === '1'" class="text-14px text-#FF7642">*注销后该人员账号下所有企业数据将被删除且无法恢复，请谨慎操作</div>
                <div
                    class="mt-12px w-full px-7px py-10px box-border bg-#F4F4F7 rounded-4px flex items-center gap-9px text-14px text-#565868">
                    <el-checkbox v-model="isSure" class="!h-20px" label="我已知晓数据移出的影响" size="large" />
                </div>
                <template #footer>
                    <div class="flex items-center justify-center">
                        <el-button @click="dialogTableVisible = false">取消</el-button>
                        <el-button type="primary" :disabled="!isSure" @click="onOperateSure">确定</el-button>
                    </div>
                </template>

            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import commonTabs from '@/components/commonTabs/index.vue'
import bigPicture from '@/components/bigPicture/index.vue'
import filterComponent from '@/components/filterComponent/index.vue'
import crumbs from '@/components/crumbs.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { useRouter } from 'vue-router'
import { shake } from '../../../utils/utils'
const router = useRouter()
import { onMounted, ref } from 'vue'
import { ElMessageBox, ElMessage, genFileId } from 'element-plus'
import { getuserlistapi, getuserlistapiB, removeTeamMemberApi, removeTeamMemberbatchApi, updateIdCardPhotoapi, userlogoutapi } from '../../../api/employeeCancellation'
import employeeLogout from './employeeLogout.vue'


const active = ref(1)
const isSure = ref(false)
const tabs = ref([
    {
        name: 'c端职工账号',
        id: 1
    },
    {
        name: 'b端员工账号',
        id: 2
    }
])

const radioType = ref('0')
const isBatch = ref(false)
const dialogTableVisible = ref(false)

const selected = ref([])
const handleSelectionChange = (ev: any) => {
    console.log(11111, ev)
    selected.value = ev
}

const pageInfoB = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const selectable = ref([] as any)

onMounted(() => {
    // getuserlist()
})

const getuserlistB = () => {
    if (filterDataB.value.list.phone.value) {
        getuserlistapiB({
            pageNum: pageInfoB.value.pageNum,
            pageSize: pageInfoB.value.pageSize,
            phone: filterDataB.value.list.phone.value
        }).then((res: any) => {
            pageInfoB.value.total = res.totalCount
            tableDataB.value = res.list
            res.list.forEach((item: any) => {
                if (item.isAdmin === 2 || item.isInApprovalProcess === 1) {
                    selectable.value.push(item.id)
                }
            })
        })
    }
}

const onOperateSure = async () => {
    if (isBatch.value) {
        const obj = {
            operateType: radioType.value,
            ids: sendArr.value
        }
        await removeTeamMemberbatchApi(obj)
        await ElMessage({
            message: '操作成功',
            type: 'success'
        })
        selected.value = []
        sendArr.value = []
        await getuserlistB()
        dialogTableVisible.value = false
    } else {
        const res = await removeTeamMemberApi({
            companyId: onOperateSureobj.value.companyId,
            userId: onOperateSureobj.value.userId
        })
        ElMessage({
            message: '操作成功',
            type: 'success'
        })
        getuserlistB()
        dialogTableVisible.value = false
    }
}
const onOperateSureobj = ref({} as any)
const sendArr = ref([] as any)
const onBatch = () => {
    sendArr.value = []
    if (selected.value.length > 0) {
        dialogTableVisible.value = true
        isSure.value = false
        isBatch.value = true
        radioType.value = '0'
        selected.value.forEach((item: any) => {
            sendArr.value.push(item.id)
        })
    }
    else {
        ElMessage({
            message: '请选择员工',
            type: 'warning'
        })
    }
}
const onMovingTutOfTheTeam = async (val: any) => {
    dialogTableVisible.value = true
    isSure.value = false
    isBatch.value = false
    radioType.value = '0'
    onOperateSureobj.value = val
    // const res = await removeTeamMemberApi({
    //     companyId: val.companyId,
    //     userId: val.userId
    // })
    // ElMessage({
    //     message: '操作成功',
    //     type: 'success'
    // })
    // getuserlistB()
}

const tableHeaderB = ref([
    {
        label: 'companyId',
        prop: 'companyId'
    },
    {
        label: '公司名称',
        prop: 'companyName'
    },
    {
        label: '员工姓名',
        prop: 'userName',
        width: 200
    },
    {
        label: '小程序角色',
        prop: 'isAdmin',
        map: {
            0: '普通成员',
            1: '管理员',
            2: '超管'
        },
        width: 200
    },
    {
        label: '手机号',
        prop: 'phone'
    },
    {
        label: '注册/加入时间',
        prop: 'createTime'
    },
    {
        label: 'openID',
        prop: 'openId'
    },
    {
        label: 'userID',
        prop: 'userId'
    },
    {
        label: '操作',
        prop: 'operate'
    },
])
const tableDataB = ref([])

const filterDataB = ref({
    list: {
        phone: {
            name: '手机号',
            prop: 'phone',
            value: '',
            placeholder: '请输入员员工手机号',
            type: 'input',
            inputType: 'text'
        }
    }
})

const searchB = () => {
    shake(getuserlistB, 400)
}
const onTabChange = (val: number | string) => {
    console.log(111, val)
}

const back = () => {
    router.back()
}
</script>

<style scoped>
.container {
    padding: 20px;
}

.red {
    color: red;
}

.uploadtitle {
    font-size: 16px;
    padding-bottom: 10px;
    padding-top: 10px;
}
</style>
